<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>校车管理-云校通-家长</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart style="background: #fff;">
	<div class="page-bd">
      <ul>
        <li style="margin-bottom: 0; border-bottom: 1px solid #e7dede;">
            <div class="weui-header weui-flex w_title">
              <div class="weui-header-left">
                <a href="javascript:;" onclick="back()" class="icon icon-109">返回</a>
              </div>
              <p class="weui-header-title">${term.termName }</p>
            </div>
        </li>
      </ul>
    </div>
    <div class="page-bd p_down">
      <div class="weui_cells afterNone afterNoneBefore w_main clear" style="margin: 0; background:none">
          <c:choose>
          	<c:when test="${null !=myList && !myList.isEmpty() }">
          		<div class="weui_cell lblue afterNone afterNoneBefore"> 
	            <div class="weui_cell_bd weui_cell_primary">
	                <p class="">我的校车</p>
	            </div>
	          </div>
	          <div class="page-bd">
	              <ul>
	              	<c:forEach var="item" items="${myList }">
	              		<li>
		                    <div class="weui-header weui-flex js-category1" data-id="${item.id }">
		                        <img src="<%=basePath %>/images/xiaochexianlu@3x.png">
		                        <p class="weui-flex-item">${item.lineName }</p>
		                        <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default bg-blue f-white">
		                        	 查看
		                        </a>
		                    </div>
		                    <div class="page-category js-categoryInner">
				                <div class="weui_cells weui_cells_access afterNone afterNoneBefore" style="margin-top: 0px;">
				                	<div class="weui_cell lblue afterNone afterNoneBefore bg_gry b_left">
								      <div class="weui_cell_bd weui_cell_primary">
								          <p>乘车记录</p>
								      </div>
								    </div>
								    <div class="weui_cells studentBoard" style="margin: 0 0 15px;">
									    
								    </div>
				                </div>
				            </div>
		                </li>
	              	</c:forEach>
	              </ul>
	          </div>
          	</c:when>
          	<c:otherwise>
          		<p class="tm p10 f-15 f-red">您没有小孩坐校车</p>
          	</c:otherwise>
          </c:choose>
          <div class="weui_cell lblue afterNone afterNoneBefore hide"> 
              <div class="weui_cell_bd weui_cell_primary">
                  <p class="">其他线路</p>
              </div>
            </div>
          <div class="weui_cell afterNone afterNoneBefore hide" id="signLine" style="padding: 10px 0px;">
            <div class="page-bd" style="width: 100%;padding-bottom: 20px;">
              <ul>
              	<c:forEach var="item" items="${lineList }">
	              	<li class="">
	                    <div class="weui-header weui-flex js-category" data-id="${item.id }">
	                        <img src="<%=basePath %>/images/xiaochexianlu@3x.png">
	                        <p class="weui-flex-item">${item.lineName }</p>
	                        <i class="icon icon-74"></i>
	                    </div>
	                    <div class="page-category js-categoryInner">
			                
			            </div>
	                </li>
              	</c:forEach>
              </ul>
            </div>
          </div>
      </div>
    </div>
    <!--弹窗-->				
	<div class="weui_mask ueureiu weui_mask_visible" style="display: none;">
	</div>
	<div class="weui_tab tab-bottom" id="lineSiteSign" style="display: none; z-index:600; background-color: #f8f8f8;"">
		<div class="weui_tab_bd" style="padding-bottom:0;">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" id="lineSignBack"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">校车报名</h1>
			</div>
			<div class="weui_cells_title">报名线路</div>
			<div class="weui_cells weui_cells_form">
	            <div class="weui_cell">
	                <div class="weui_cell_hd"><label class="weui_label">线路名称：</label></div>
	                <div class="weui_cell_bd weui_cell_primary" id="s_line_name">
	                </div>
	            </div>
	            <div class="weui_cell">
	                <div class="weui_cell_hd"><label class="weui_label">站点名称：</label></div>
	                <div class="weui_cell_bd weui_cell_primary" id="s_site_name">
	                </div>
	                <input type="hidden" id="siteId">
	            </div>
	        </div>
           	<div class="page-bd" id="signInfo">
           		<div class="weui_cells_title" style="text-align: left;">请选择乘车的学生</div>
           		<div class="weui_cells weui_cells_checkbox" id="studentList">
		        </div>
           	</div>
           	<div class="weui_btn_area">
                <a href="javascript:" id="formSubmitBtn" class="weui_btn btn-lg bg-blue">确认报名</a>
            </div>
           	<div class="weui_cells">
                <div class="weui_cell lblue afterNone afterNoneBefore">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p class="">乘车须知</p>
                    </div>
                </div>
                <div style="padding: 5px;">
                    1、在车辆行驶过程中勿随意触摸车上控制器，如车门锁等。 <br/>
			 		2、勿向车窗外乱扔杂物，以免伤及他人。   <br/>
			 		3、车辆行驶的过程中勿将身体任何部位拉伸出窗外，以免被对面来车或路边树木等刮伤，更勿中途跳车。 <br/>
			 		4、乘车时要系好安全带，坐稳、扶好，以免车辆紧急刹车时摔倒受伤。 <br/>
			 		5、乘坐校车时不要离开自己的座位，否则遇到急刹车时有可能会摔倒甚至被甩出去。校车行驶过程中严禁打闹，校车在拐弯、刹车的情况下，惯性的作用非常大，要注意发生意外伤害。 
                </div>
	        </div>
		</div>
	
	</div>
	<!--End弹窗-->
    <script id="line-table-template" type="text/x-handlebars-template">
	  	<div class="weui_cells weui_cells_access bg_gry" style="margin-top: 0px;">
		    <div class="weui_cell lblue afterNone afterNoneBefore bg_gry b_left">
		      <div class="weui_cell_bd weui_cell_primary">
		          <p>乘车路线</p>
		      </div>
		    </div>
		    <div class="weui_cell_bd weui_cell_primary w_primary appear" style="display: block;">
		      <p>站点名称</p>
		      <p>预计金额（元）</p>
		    </div>
		    <div class="weui_cell bg-white clear">
		      <div class="weui_tab">
		        <div class="bg-white weui_tab_bd" style="padding-bottom:0;">
		          <div class="timeline1">
						<ul id="siteList" style="padding-left:0;padding-top:0;">
							{{#each list}}
							<li class="timeline-item-o timeline-item" style="margin: 0 0;">
								<div class="div1">
									<label class="weui_cells_checkbox weui_check_label" for="{{id}}">
										<div class="weui_cell_hd">
											<input type="checkbox" class="weui_check" data-name="{{siteName}}" value="{{id}}" id="{{id}}">
			        						<i class="weui_icon_checked icon-35"></i>
										</div>
									</label>
								</div>			
								<div class="timeline-item-head div2">								
									<i class="weui_icon weui_icon_success_no_circle timeline-item-checked hide"></i>
									<span class="f-white">{{addOne @index}}</span>				
								</div>
								{{#if @last}}
									<div class="timeline-item-tailhide div3"></div>
								{{else}}
									<div class="timeline-item-tail div3"></div>
								{{/if}}							
								<div class="timeline-item-content div4">								
									<span>{{siteName}}</span>					
								</div>		
								<div class="timeline-item-content div5">{{unitPrice}}</div>
							</li>
							{{/each}}
						</ul>
				  </div>
		          <div class="weui_cells afterNone afterNoneBefore w_main clear" style="margin: 0; background:none">
		              <div class="weui_btn_area">
		                  <a id="signBtm" href="javascript:" class="weui_btn btn-lg bg-blue">报名</a>
		              </div>
		          </div>
		      </div>
		    </div>   
		 </div>
    </script>
    <script>
      $(function(){
    	$(".js-category1").click(function() {
    		$parent = $(this).parent('li');
            if($parent.hasClass('js-show')){
                $parent.removeClass('js-show');
                $(this).children('i').removeClass('icon-35').addClass('icon-74');
            }else{
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $(this).children('i').removeClass('icon-74').addClass('icon-35');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
                loadStudentBoard($(this));
            }
    	})
        $('.js-category').click(function(){
          	$parent = $(this).parent('li');
            if($parent.hasClass('js-show')){
                $parent.removeClass('js-show');
                $(this).children('i').removeClass('icon-35').addClass('icon-74');
            }else{
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $(this).children('i').removeClass('icon-74').addClass('icon-35');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
                var list = $("#signLine").find("input:checked")
	           	list.each(function(i, v){
	   				v.checked = false;
	   			});
                getLineSite($(this));
            }
         });
         $(document).on("click", "#signLine input", function(e) {
        	 var list = $("#signLine").find("input:checked")
        	 list.each(function(i, v){
				v.checked = false;
			 });
        	 this.checked = true;
         });
         $(document).on("click", "#signBtm", function(e) {
        	 var obj = $("#signLine").find("input:checked");
        	 if(obj.length > 0) {
        		 $(".weui_mask").show();
            	 $("#lineSiteSign").show();
            	 $("#siteId").val($(obj).attr("id"));
            	 $("#s_site_name").html($(obj).attr("data-name"));
            	 $("#s_line_name").html($(obj).closest("li.js-show").find(".weui-flex-item").text());
            	 loadStudentList();
        	 }
         });
         //隐藏弹出框
 		 $(".weui_mask").click(function(){
 			$(".weui_mask").hide();
 			$("#lineSiteSign").hide();
 		 });
         $("#lineSignBack").click(function() {
        	$(".weui_mask").hide();
 			$("#lineSiteSign").hide();
         })
         $("#formSubmitBtn").click(function() {
        	 formSubmitBtn();
         })
         $(".js-category1")[0].click();
       });
       function getLineSite(thiz) {
    	   if(thiz.next().html().trim() != '') return;
    	   $.ajax({
   	 		url : basePath + "/xs/schoolbus/siteList",
   	 		type : "post",
   	 		dataType : "json",
   	 		data: {
   	 			lineId: thiz.attr("data-id")
   	 		},
   	 		async : false,
   	 		success : function(data) {
   	 			if(data != null && data.length > 0) {
   	 				var obj = {};
   	 				obj.list = data;
   	 				thiz.next().html(loadLineHtml(obj));
   	 			}
   	 		}, error:function(){
  	 			$.toptips("查询异常");
     		}
   	 	});
       }
       
       function loadLineHtml(data){
   			var myTemplate = Handlebars.compile($("#line-table-template").html());
   			Handlebars.registerHelper("equal", function(v1,v2,options) {
   				if(v1 == v2) {
   					//满足添加继续执行
   					return options.fn(this);
   				}else {
   					//不满足条件执行{{else}}部分
   					return options.inverse(this);
   				}
   			});
   			var handleHelper = Handlebars.registerHelper("addOne",function(index){
   				return index+1;
   			});
   			Handlebars.registerHelper("dateFormat", function(v1) {
   				return getTime(v1, "yyyy-MM-dd hh:mm:ss");
   			});
   			return myTemplate(data);
   		}
        function loadStudentList() {
        	$.ajax({
       	 		url : basePath + "/xs/my/studentList",
       	 		type : "post",
       	 		dataType : "json",
       	 		async : false,
       	 		success : function(data) {
       	 			if(data != null && data.length > 0) {
       	 				var html = '';
       	 				for(var i in data) {
       	 					var itm = data[i];
       	 					html += '<label class="weui_cell weui_check_label" for="'+itm.id+'">\
				                <div class="weui_cell_bd weui_cell_primary">\
				                    <p>'+itm.name+'</p>\
				                </div>\
				                <div class="weui_cell_hd">\
				                    <input type="checkbox" class="weui_check" name="checkbox1" value="'+itm.id+'" id="'+itm.id+'" '+(i==0 ? "checked=\"checked\"" : "")+'>\
				                    <i class="weui_icon_checked"></i>\
				                </div>\
				            </label>';
       	 				}
       	 				$("#studentList").html(html);
       	 			}
       	 		}, error:function(){
      	 			$.toptips("查询异常");
         		}
        	})
        }
        function loadStudentBoard(thiz) {
        	$.ajax({
       	 		url : basePath + "/xs/schoolbus/studentBoard",
       	 		type : "post",
       	 		dataType : "json",
       	 		data: {
       	 			lineId: thiz.attr("data-id")
       	 		},
       	 		async : false,
       	 		success : function(data) {
       	 			if(data != null && data.length > 0) {
       	 				var html = '<div class="weui_cell downSlide">\
							<div class="weui_cell_hd" style="color:#888;">学生姓名</div>\
							<div class="weui_cell_hd" style="color:#888;padding-left: 8%;">状态</div>\
							<div class="weui_cell_bd" style="color:#888;padding-left: 8%;">上车时间</div>\
						</div>';
       	 				for(var i in data) {
       	 					var itm = data[i];
       	 					html += '<div class="weui_cell downSlide">\
								<div class="weui_cell_hd" style="font-size: 14px;">'+itm.studentName+'</div>\
								<div class="weui_cell_hd" style="font-size: 14px;padding-left: 15%;">'+(itm.isBoard == 1 ? "已上车" : "未上车")+'</div>\
								<div class="weui_cell_bd" style="font-size: 14px;padding-left: 8%;">'+getTime(itm.boardTime, "yyyy-MM-dd hh:mm")+'</div>\
							</div>';
							html += '<div class="weui_cell">\
										<div class="weui_cell_bd" style="width: 50%;">\
										    <a href="http://gdsmp.wangytech.com/wechat/monitor/gpswx?encrypt_content=xxxx36e27d5259a3560311ac5e648ca48894xxxxxxxx'+parseInt(new Date().getTime()/1000)+'xxxx&org_stu_id='+itm.studentId+'" class="weui_btn weui_btn_mini weui_btn_default bg-blue f-white">\
					                       	 查看校车位置</a></div>\
					                    <div class="weui_cell_bd">\
										    <a href="http://gdsmp.wangytech.com/wechat/monitor/qrcode?encrypt_content=xxxx36e27d5259a3560311ac5e648ca48894xxxxxxxx'+parseInt(new Date().getTime()/1000)+'xxxx&org_stu_id='+itm.studentId+'" class="weui_btn weui_btn_mini weui_btn_default bg-blue f-white">\
					                       	 刷卡上下车</a></div>\
					                </div></div>';
       	 				}
       	 				thiz.next().find(".studentBoard").html(html);
       	 			}
       	 		}, error:function(){
      	 			$.toptips("查询异常");
         		}
        	})
        }
        function formSubmitBtn(){
        	var list = $("#studentList").find("input:checked");
        	if(list.length == 0) {
        		alert("请选择乘车的学生");
        		return;
        	}
        	var studentIds = new Array();
        	list.each(function(i, v) {
        		studentIds.push($(v).val());
        	})
        	$.ajax({
       	 		url : basePath + "/xs/schoolbus/studentSign",
       	 		type : "post",
       	 		dataType : "json",
       	 		data: {
       	 			studentIds: studentIds.toString(),
       	 			siteId: $("#siteId").val()
       	 		},
       	 		async : false,
       	 		success : function(data) {
       	 			if(data.code == '000') {
       	 				alert("报名成功");
	       	 			var list = $("#signLine").find("input:checked")
	    	           	list.each(function(i, v){
	    	   				v.checked = false;
	    	   			});
       	 				$("#lineSignBack").trigger("click");
       	 			}else if(data.code == '9998'){
       	 				var msg = '';
       	 				for(var i in data.data) {
       	 					var itm = data.data[i];
       	 					msg += itm.studentName + "已报名" + itm.lineName + "的" + itm.siteName;
       	 					if((i+1) < data.data.length) {
       	 						msg += ";";
       	 					}
       	 				}
       	 				alert(msg);
       	 			}else {
       	 				alert(data.msg);
       	 			}
       	 		}, error:function(){
      	 			$.toptips("系统异常");
         		}
        	})
        }
    </script>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>